<template>
	<div class="login-wrap">
		<img class="logo-img" :src="logo" alt="">

		<div @click="handleToLogin" class="login-btn active-btn">手机号登录</div>

		<div class="agree-xieyi">
			<van-checkbox v-model="checked" icon-size=".28rem" checked-color="#ee0a24">
				登录即代表同意<span class="agree-entry" @click="handleToService">《用户协议》</span>和
				<span class="agree-entry" @click="handleToPrivacy">《隐私协议》</span>
				<div class="agree-entry" @click="handleToCooperate">《平台推广合作协议》</div>
			</van-checkbox>
		</div>
	</div>
</template>

<script>
import { logo } from '@/tool/static-img';
export default {
	data() {
		return {
			logo,
			checked: false
		}
	},
	methods: {
		handleToLogin() {
			if (!this.checked) {
				this.$toast('请先同意协议');
				return
			}
			this.$router.push({
				name: 'phoneLogin'
			})
		},
		handleToService() {
			this.$router.push({
				name: 'service'
			})
		},
		handleToPrivacy() {
			this.$router.push({
				name: 'privacy'
			})
		},
		handleToCooperate() {
			this.$router.push({
				name: 'cooperation'
			})
		}
	}
}
</script>

<style lang="scss">
.van-icon {
	margin-top: -10px !important;
}

.login-wrap {
	width: 100%;
	// overflow: hidden;
	min-height: 100vh;
	padding-top: 3.12rem;
	padding-bottom: calc(1rem + constant(safe-area-inset-bottom));
	padding-bottom: calc(1rem + env(safe-area-inset-bottom));
	background: #ffffff;
	box-sizing: border-box;
	// position: relative;
	.logo-img {
		display: block;
		width: 2.4rem;
		// height: 2.4rem;
		margin: auto;
	}

	.login-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 6.22rem;
		height: 0.88rem;
		margin: auto;
		margin-top: 3.34rem;
		font-size: 0.32rem;
		font-weight: 500;
		color: #ffffff;
		border-radius: 0.44rem;
		background: linear-gradient(135deg, #FF5851 0%, #E9011B 100%);
	}

	.agree-xieyi {
		width: 70%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		right: 0;
		bottom: calc(0.66rem + constant(safe-area-inset-bottom));
		bottom: calc(0.66rem + env(safe-area-inset-bottom));
		margin: 0 auto;
		// overflow: auto;
		// margin-left: ;
		height: 0.32rem;
		line-height: 0.32rem;
		font-weight: 400;
		font-size: 0.23rem;
		color: #666666;
		text-align: center;
	}

	.agree-entry {
		color: #E9011B;
	}
}
</style>